<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
    ></script>
    <!-- 提供通用API和主题 -->
    <!-- <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script> -->
    <!-- 初始化地图 -->
    <script src="../js/initMap.js"></script>
    <!-- 城市 -->
    <script src="./city.js"></script>
    <!-- 主题 -->
    <script src="../js/theme.js"></script>
    <!-- 通过城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <title>散点图</title>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
  </body>
</html>
<script type="text/javascript">
  // 通过 mapv API 获取坐标点
  const cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[0]);
  // 初始化 id必须为#map_container --- common.js API
  const map = initMap({
    tilt: 0, // 倾斜
    heading: 0, // 旋转
    center: [cityCenter.lng, cityCenter.lat], // 坐标
    zoom: 8, // 放大比例
    style: snowStyle, // 主题默认darkStyle common.js查看
  });

  // 准备数据源 - 散点必须满足以下格式
  const initData = () => {
    const data = [];
    let randow = 200;
    while (randow--) {
      const num = parseInt(Math.random() * citys.length); // 随机下标
      const randomCity = mapv.utilCityCenter.getCenterByCityName(citys[num]);
      data.push({
        geometry: {
          type: "Point", // 设置为点
          // 维度和精度 - 省会周边
          coordinates: [
            randomCity.lng - 2 + Math.random() * 4,
            randomCity.lat - 2 + Math.random() * 4,
          ],
        },
        // 自定义属性
        properties: {
          count: Math.random() * 100,
        },
      });
    }
    console.log("data -", data);
    return data;
  };

  // 绘制数据源
  const setData = (data) => {
    // 生成 mapgl 视图 View
    const view = new mapvgl.View({ map });
    // 初始化 Intensity 对象
    const intensity = new mapvgl.Intensity({
      max: 100, // 点最大值
      min: 0, // 点最小的值
      // 根据点的大小自动颜色渐变
      gradient: {
        0: "rgb(25, 66, 102, 0.8)",
        0.3: "rgb(145, 102, 129, 0.8)",
        0.7: "rgb(210, 131, 137, 0.8)",
        1: "rgb(248, 177, 149, 0.8)",
      },
      maxSize: 30, // 点最大的像素
      minSize: 5, // 点最小的像素
    });
    // 初始化PointLayer 对象 - 相当于地图上盖一层
    const pointLayer = new mapvgl.PointLayer({
      // data 每一个点的数据
      size: function (data) {
        // 自动计算 maxSize - minSize 之间的值
        return intensity.getSize(data.properties.count);
      },
      color: function (data) {
        return intensity.getColor(data.properties.count);
      },
    });
    // 将 PointLayer 对象插入 View 中
    view.addLayer(pointLayer);
    // 数据绑定
    pointLayer.setData(data);
  };

  const data = initData();
  setData(data);
</script>
